<template>
  <div class="user-profile">
    <van-nav-bar class="nav_title"
                 title="个人信息"
                 left-text="返回"
                 left-arrow
                 @click-left="$router.back()" />

    <input type="file"
           hidden
           ref="file"
           @change="onFileChange">

    <van-cell title="头像"
              class="imgLink"
              @click="$refs.file.click()"
              is-link>
      <van-image class="avatar"
                 round
                 width="10rem"
                 height="10rem"
                 :src="user.photo" />
    </van-cell>
    <van-cell title="昵称"
              is-link
              :value="user.name"
              @click="isUpdateNameShow = true" />
    <van-cell title="性别"
              is-link
              :value="user.gender === 0 ? '男' : '女' " />
    <van-cell title="生日"
              is-link
              :value="user.birthday"
              @click="isUpdateBirthdatShow = true" />

    <van-popup v-model="isUpdateNameShow"
               style="height: 100%; width: 100%"
               position="bottom">
      <update-name v-if="isUpdateNameShow"
                   v-model="user.name"
                   @close="isUpdateNameShow = false" />
    </van-popup>

    <van-popup v-model="isUpdateBirthdatShow"
               style="height: 100%; width: 100%"
               position="bottom">
      <update-birthday v-if="isUpdateBirthdatShow"
                       v-model="user.birthday"
                       @close="isUpdateBirthdatShow = false " />
    </van-popup>

    <van-popup v-model="isUpdatePhotoShow"
               style="height: 100%; width: 100%"
               position="bottom">
      <update-photo :img="img"
                    @close="isUpdatePhotoShow = false"
                    @update-photo="user.photo = $event" />
    </van-popup>

  </div>
</template>

<script>
import { getUserProfile } from '@/api/user.js'
import UpdateName from './commponents/update-name.vue'
import UpdateBirthday from './commponents/update-birthday.vue'
import UpdatePhoto from './commponents/update-photo.vue'
export default {
  name: 'UserProfile',
  components: { UpdateName, UpdateBirthday, UpdatePhoto },
  data () {
    return {
      user: {},
      isUpdateNameShow: false,
      isUpdateBirthdatShow: false,
      isUpdatePhotoShow: false,
      img: null
    }
  },
  created () {
    this.loadUserProfile()
  },
  methods: {
    async loadUserProfile () {
      try {
        const { data } = await getUserProfile()
        this.user = data.data
        console.log(this.user)
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    onFileChange () {
      const file = this.$refs.file.files[0]
      this.img = window.URL.createObjectURL(file)
      this.isUpdatePhotoShow = true
      this.$refs.file.value = ''
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile {
  .nav_title {
    background-color: #41b883;
    /deep/ .nav_title {
      color: #fff;
    }
  }
  /deep/ .van-icon,
  /deep/ .van-nav-bar__text,
  /deep/ .van-nav-bar__title {
    color: #fff !important;
  }
  /deep/.avatar {
    width: 60px !important;
    height: 60px !important;
  }
  .van-cell__right-icon {
    color: #969799 !important;
  }
}
</style>
